<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
		<!--格式识别，一串数字不会识别成电话号码 -->
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/reset.css">
		<style type="text/css">
			html{
				width:100%;
				height:100%;
				overflow-x:hidden;
			}
			body {
				text-align:left;
				width:100%;
				overflow:hidden;
				background-color:#e9dfc7;
			}

			.hidden{
				display:none;
			}
			.m-read-content{
				font-size: 14px;
				color:#555;
				line-height: 31px;
				padding: 15px;

			}
			.m-read-content h4{
				/*
				这种四方向的比较好维护
				 */
				margin:0 0 1em 0;
				font-size: 20px;
				color:#736357;
				border-bottom:1px solid #736357;
				/*
				设置字间距
				 */
				letter-spacing: 2px;
			}
			
			.m-read-content p{
				text-indent:2em;
				margin: 0.5em 0;
				letter-spacing: 0px;
			}

			.m-button-bar{
				width: 70%;
				/**最大宽度
				 * [width description]
				 * @type {[type]}
				 */
				max-width: 880px;
				padding: 5px;
				margin:0 auto;

			}
			
			.u-tab {
				height: 34px;

				margin:10px auto;
				line-height:34px;
				border-radius:8px;
				border:1px solid #858382;
				font-size:12px;
				background:#000;
				opacity:0.9;
			}

			.u-tab li{
				display: inline-block;
				width:49%;
				border-right: 1px solid #858382;
				text-align: center;
				color:#fff;
			}
			/*
			注意这里是在1开始
			 */
			.u-tab li:nth-child(2){
				border-right:none;
			}

			.top-nav{
				position: fixed;
				top:0px;
				height: 50px;
				width:100%;
				z-index:9999;
				background:#000;
			}

			.icon-back{
				position:absolute;
				top:14px;
				left:10px;
				width:23px;
				height:23px;
				background:url();

					/*
					自适应父容器的宽度和高度
					 */
					background-size:contain;
			}

			.nav-title{
				position:absolute;
				top:16px;
				left:42px;
				color:#d5d5d6;
			}

			.footer-nav{
				position:fixed;
				bottom:0px;
				height:70px;
				width:100%;
				z-index:9999;
				opacity:0.9;
				background:#000;
			}

			.footer-nav .item{
				float:left;
				width:33%;
			}

			.item-style{
				width:30px;
				margin:0 auto;
			}	
			




			.item-menu-icon{
				width: 18px;
				height:15px;
				margin:18px auto 0;
				background:url() no-repeat;

			    background-size:contain;
			}

			.item-moon-icon{
				width:18px;
				height:15px;
				margin:18px auto 0;
				background:url() no-repeat;

			    background-size:contain;
			}

			.item-sun-icon{
				width:18px;
				height:15px;
				margin:18px auto 0;
				background:url() no-repeat;

			    background-size:contain;
			}
			


			.item-font-icon{
				width:18px;
				height:15px;
				margin:18px auto 0;
				background:url() no-repeat;

			    background-size:contain;
			}

			.item-fontawake-icon{
				width:18px;
				height:15px;
				margin:18px auto 0;
				background:url() no-repeat;

			    background-size:contain;
			}

			.footer-nav .content{
				text-align:center;
				height:19px;
				line-height:19px;
				margin:10px auto 0;
				font-family:"微软雅黑";
				color:#fff;
			}
			
			.nav-pannel-bk {
				position:fixed;
				bottom:70px;
				height:135px;
				width:100%;
				background: #000;
				opacity:0.9;
				z-index:10000;
			}

			.nav-pannel{
				position: fixed;
				bottom: 70px;
				height:135px;
				width:100%;
				background: none;
				color:#fff;
				z-index:10001;
			}
			
			.child-mod {
				padding: 5px 10px;
				margin:15px;

			}

			.child-mod span{
				display:inline-block;
				padding-right:20px;
				padding-left:10px;

			}

			.font-size-button{
				background:none;
				border:1px #8c8c8c solid;
				color:#fff;
				border-radius:16px;
				padding:5px 40px;


			}
			/**
			 * 这里没有搞懂为什么是2
			 * @param  {[type]} 2 [description]
			 * @return {[type]}   [description]
			 */
			.child-mod .font-size-button:nth-child(2) {
				margin-right:10px;
			}
			.white{
				background:#fff;
			}
			.orange{
				background:#e9dfc7;
			}

			.gray{
				background:#a5a4a5;
			}
			.green{
				background:#cff3d1;
			}
			.blue{
				background:#293748;
			}
			.black{
				background:#0f1410;
			}
			.bk-container{
				position:relative;
				width: 30px;
				height:30px;
				border-radius:15px;
				display: inline-block;
				vertical-align:middle;
				margin-right:8px;
			}
			.bk-container:nth-child(7){
				margin-right:0px;
			}
			.bk-container-current{
				position:absolute;
				width:32px;
				height:32px;
				border-radius: 16px;
				border:1px #ff7800 solid;
				display:inline-block;
				top:-2px;
				left:-2px;
			}

			.artical-action-middle{
				position:fixed;
				z-index:10002;
				width:100%;
				height:40%;
				top:30%;
			}
		</style>
	</head>
	<body>
		
		<div id="root" class="container">
			<div class="m-artical-action">
			<div class="artical-action-middle" id="action_mid"></div>
			</div>
			<div id="top" class="top-nav" style="display:none">
				
				<div class="icon-back"></div>
				<div class="nav-title">返回书架</div>

			</div>
			<div id="footer" class="footer-nav" style="display:none">
				<div class="item">
				 <div class="item-menu item-style">
					<div class="item-menu-icon"></div>
					<div class="content">目录</div>
				</div>
				</div>
				<div class="item">
				 <div class="item-font item-style">
					<div class="item-font-icon"></div>
					<div class="content">字体</div>
				 </div>
				</div>
				<div class="item">
				 <div class="item-moon item-style">
					<div class="item-moon-icon"></div>
					<div class="content">夜间</div>
				</div>
				<div class="item-sun item-style" style="display:none">
					<div class="item-sun-icon" ></div>
					<div class="content">白天</div>
				</div>
				</div>
			</div>
			<div class="nav-pannel-bk" style="display:none"></div>
			<div class="nav-pannel" id="foot_container" style="display:none">
				<div class="child-mod">
					<span>字号</span>
					<button id="large-font" class="font-size-button">大</button>
					<button id="small-font" class="font-size-button">小</button>
				</div>
				<div class="child-mod">
					<span>背景</span>
					<div class="bk-container white">
						<div class="bk-container-current">
						</div>
					</div>
					<div class="bk-container orange">
						<div>
						</div>
					</div>
					<div class="bk-container gray">
						<div >
						</div>
					</div>
					<div class="bk-container green">
						<div >
						</div>
					</div>
					<div class="bk-container blue">
						<div >
						</div>
					</div>

					<div class="bk-container black">
						<div >
						</div>
					</div>
				</div>
	


			</div>

			<div id="fiction_chapter_title" class="title" ></div>
			<div id="fiction_container" class="m-read-content">
			
			</div>
			<div class="m-button-bar">
				<ul class="u-tab">
					<li id="prev_button">上一章</li>
					<li id="next_button">下一章</li>
				</ul>
			</div>
		</div>
		



		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script src="js/jquery.base64.js"></script>
		<script src="js/jquery.jsonp.js"></script>

		<script>
		//闭包声明
			(function(){
				//有严格模式的声明才能使用es6代码
				'use strict';
				var Util =(function(){
					var prefix = 'html5_reader_'
					var StorageGetter = function(key){
						return localStorage.getItem(prefix+key);
					}

					var StorageSetter = function(key,val){

						 localStorage.setItem(prefix+key,val);
					}
					var getJSONP = function(url,callback){
						return $.jsonp({
							url:url,
							cache:true,
							callback:'duokan_fiction_chapter',
							success :function(result){
								var data = $.base64.decode(result);
								var json = decodeURIComponent(escape(data));
								callback(json);
							}
						})

						}
					
					return {
						getJSONP:getJSONP,
						StorageGetter:StorageGetter,
						StorageSetter:StorageSetter

					}
						
				})();
					var Dom={
						top_nav:$('#top'),
						footer_nav:$('#footer'),
						menu_btn:$('.item-menu'),
						font_btn:$('.item-font'),
						moon_btn:$('.item-moon'),
						sun_btn:$('.item-sun'),
						foot_container:$('#foot_container'),
						foot_container_bk:$('.nav-pannel-bk'),
						fiction_container:$('#fiction_container'),
						bk_container:$('.bk-container'),
						bk_container_content:$('.bk-container > div')
					

					}
					var Win = $(window);
					var Doc =$(document);
					var Body =$('body');
					//数据层接口
					var Reader;
					//UI层接口
					var readerUI;
					var initFontSize=Util.StorageGetter('font_size')==null?14:parseInt(Util.StorageGetter('font_size'));
					var bg_color=Util.StorageGetter('bg_color')==null?'#e9dfc7':Util.StorageGetter('bg_color');
					function main(){
						//todo 整个项目的入口函数
						Reader=ReaderModel();
						readerUI = ReaderBaseFrame(Dom.fiction_container);
						Reader.init(function(data){
							readerUI(data);
						});
						init();
						EventHanlder();
					}
					//初始化方法
					function init(){

						Body.css("background-color",bg_color);
						Dom.fiction_container.css('font-size',initFontSize+'px');
						changeMode(bg_color);
						if(bg_color == 'rgb(233, 223, 199)'){
							Dom.sun_btn.hide();
							Dom.moon_btn.show();
						}

						if(bg_color == 'rgb(15, 20, 16)'){
							Dom.moon_btn.hide();
							Dom.sun_btn.show();
						}
						Dom.bk_container.each(function(){
						if($(this).css('background-color') == bg_color){
							changeBorder($(this));
						}
					})
					}
					function ReaderModel(){
						//todo 实现和阅读器相关的数据交互的方法
						var Chapter_id;
						var ChapterTotal=4;
						var init = function(UIcallback){
							// getFictionInfo(function(){
							// 	getCurChapterContent(Chapter_id,function(data){
							// 		//TODO...
							// 		UIcallback && UIcallback(data);
							// 	})
							// })
							
							getFictionInfoPromise().then(function(){
								return getCurChapterContentPromise(Chapter_id);
							}).then(function(data){
								UIcallback && UIcallback(data);
							})

							



						}
						var getFictionInfo=function(callback){
							$.get('data/chapter.json',function(data){
								//TODO 获得章节信息之后的回调
								Chapter_id = Util.StorageGetter('chapter_id') == null?data.chapters[1].chapter_id :parseInt(Util.StorageGetter('chapter_id'),10);
								callback && callback();
							},'json');
						}
						var getFictionInfoPromise=function(){
							//返回promise实例
							return new Promise(function(resolve,reject){

							$.get('data/chapter.json',function(data){
								//通过服务端传送的信息判断成功或失败
								if(data.result==0){
								//TODO 获得章节信息之后的回调
								Chapter_id = Util.StorageGetter('chapter_id') == null?data.chapters[1].chapter_id :parseInt(Util.StorageGetter('chapter_id'),10);
								//成功时调用的函数
								resolve();
							}else{
								//失败时调用的函数
								reject()
							}
							},'json');


						})
						}
						var getCurChapterContent = function(chapter_id,callback){
							$.get('data/data'+chapter_id +'.json',function(data){
								if(data.result == 0){
									var url=data.jsonp;
									Util.getJSONP(url,function(data){
										callback && callback(data);
									});
								}



							},'json');
						}


						var getCurChapterContentPromise = function(chapter_id){

							return new Promise(function(resolve,reject){

							$.get('data/data'+chapter_id +'.json',function(data){
								if(data.result == 0){
									var url=data.jsonp;
									Util.getJSONP(url,function(data){
										resolve(data);
									});
								}
								else{

								reject();
							}


							},'json');





							})
						}
						var prevChapter = function(UIcallback){
							//10进制整数
							Chapter_id =parseInt(Chapter_id,10);

							if(Chapter_id == 1){
								return;
							}

							Chapter_id -=  1;
							Util.StorageSetter('chapter_id',Chapter_id);
							getCurChapterContentPromise(Chapter_id).then(function(data){
								UIcallback && UIcallback(data);
							})
							


						}
						var nextChapter = function(UIcallback){
							//10进制整数
							Chapter_id =parseInt(Chapter_id,10);

							if(Chapter_id == ChapterTotal){
								return;
							}

							Chapter_id+= 1;
							Util.StorageSetter('chapter_id',Chapter_id);
							
							getCurChapterContentPromise(Chapter_id).then(function(data){
								UIcallback && UIcallback(data);
							})

						}
						return {
							init:init,
							prevChapter:prevChapter,
							nextChapter:nextChapter
						}
					}

					function ReaderBaseFrame(container){
						//todo 渲染基本的UI结构
						function parseChapterData(jsonData){
							//将解析过后的字符串转化为json对象
							var jsonObj = JSON.parse(jsonData);
							var html = '<h4>' + jsonObj.t + '</h4>'

							for(var i=0;i<jsonObj.p.length;i++){
								html+='<p>'+jsonObj.p[i]+'</p>';
							}

							return html;
						}

						return function(data){
							container.html(parseChapterData(data));
						}
					}

					//改变选择背景时的边框变化
					function changeBorder(item){
						Dom.bk_container_content.removeClass();
						item.children().eq(0).addClass("bk-container-current");
					}
					//改变为白天模式或者夜晚模式
					function changeMode(color){
						if(color == 'rgb(233, 223, 199)'){
							Dom.sun_btn.hide();
							Dom.moon_btn.show();
						}

						if(color == 'rgb(15, 20, 16)'){
							Dom.moon_btn.hide();
							Dom.sun_btn.show();
						}
					}


					function EventHanlder(){
						//todo 交互事件绑定
						//click在浏览器和手机上都可以用
						//touch只能在手机上点触
						$('#action_mid').click(function(){

							if(Dom.top_nav.css('display') =='none'){
								Dom.top_nav.show();
								Dom.footer_nav.show();
							}else{
								Dom.top_nav.hide();
								Dom.footer_nav.hide();
								Dom.foot_container_bk.hide();
						        Dom.foot_container.hide();
						        Dom.font_btn.children().eq(0).attr('class','item-font-icon');

							}
						})
						//字体按钮操作
						$(Dom.font_btn).click(function(){
							var fontDom=$(this).children().eq(0);
							var fontClass=fontDom.attr('class');
							if(fontClass == 'item-font-icon'){
								fontDom.attr('class','item-fontawake-icon');
								Dom.foot_container_bk.show();
								Dom.foot_container.show();
							}else{
								fontDom.attr('class','item-font-icon');
								Dom.foot_container_bk.hide();
								Dom.foot_container.hide();
							}
						})
						//字体放大按钮操作
						$('#large-font').click(function(){
							if(initFontSize>=20){
								return;
							}
							initFontSize+=1;
							Dom.fiction_container.css('font-size',initFontSize+'px')
							Util.StorageSetter('font_size',initFontSize);
						})
						//字体缩小按钮操作
						$('#small-font').click(function(){
							if(initFontSize<=12){
								return;
							}
							initFontSize-=1;
							Dom.fiction_container.css('font-size',initFontSize+'px')
							Util.StorageSetter('font_size',initFontSize);
						})

						//背景色改变操作
						$(Dom.bk_container).click(function(){
							changeBorder($(this));
							bg_color =$(this).css('background-color');
							changeMode(bg_color);
							Body.css("background-color",bg_color);
							Util.StorageSetter('bg_color',bg_color);
						})


						//切换为夜间模式
						
						$(Dom.moon_btn).click(function(){
							$(this).hide();
							Dom.sun_btn.show();
							var colorDom=Dom.bk_container.eq(5);
							bg_color=colorDom.css("background-color");
							Body.css("background-color",bg_color);
							changeBorder(colorDom);
							Util.StorageSetter('bg_color',bg_color);

						})

						//切换为白天模式
						

						$(Dom.sun_btn).click(function(){
							$(this).hide();
							Dom.moon_btn.show();
							var colorDom=Dom.bk_container.eq(1);
							bg_color=colorDom.css("background-color");
							Body.css("background-color",bg_color);
							changeBorder(colorDom);
							Util.StorageSetter('bg_color',bg_color);

						})


						//上下页切换
						//翻向上一页
						$('#prev_button').click(function(){
							//获得章节的翻页数据
							//这里因为已经在初始化时调用过了，所以就不必重复调用
							// Reader=ReaderModel();
							// readerUI = ReaderBaseFrame(Dom.fiction_container);
							Reader.prevChapter(function(data){
								readerUI(data);
							})
						})
						//翻向下一页
						$('#next_button').click(function(){


							Reader.nextChapter(function(data){
								readerUI(data);
							})
						})


						//窗口滚动操作
						Win.scroll(function(){
							Dom.top_nav.hide();
							Dom.footer_nav.hide();
							Dom.foot_container_bk.hide();
						    Dom.foot_container.hide();
						    Dom.font_btn.children().eq(0).attr('class','item-font-icon');
						})


					}


					main();



			})();
		</script>
	</body>
</html>
